<template>
  <div>
    <div class="title">
      <h1>基本信息</h1>
    </div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="200px">
        <el-form-item
          label="名称/CAS号："
          style="width: 600px;font-size: 8ex"
          prop="cas"
          :rules="[
            {required: true, message: 'cas号不能为空',trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.cas" style="width: 50%;" placeholder="请输入内容" @change="getInformation" />
        </el-form-item>

        <el-form-item
          label="物质类别："
          style="width: 600px;font-size: 8ex"
          prop="wzlb"
          :rules="[
            {required: true, message: '物质类别不能为空',trigger: 'blur'}
          ]"
        >
          <el-cascader
            v-model="selectedOptions"
            :options="cates"
            @change="handleChangeWzlb"
          />
        </el-form-item>

        <el-form-item
          label="处理工艺："
          style="width: 600px;font-size: 8ex"
          prop="process"
          :rules="[
            {required: true, message: '处理工艺不能为空',trigger: 'blur'}
          ]"
        >
          <el-cascader
            v-model="selectedOptions2"
            :options="techs"
            @change="handleChangeClgy"
          />
        </el-form-item>

        <el-form-item
          label="纤维类型："
          style="width: 600px;font-size: 8ex"
          prop="xwlb"
          :rules="[
            {required: true, message: '纤维类别不能为空',trigger: 'blur'}
          ]"
        >
          <el-select v-model="value_f" placeholder="请选择" @change="getFiber">
            <el-option
              v-for="item in fibers"
              :key="item.value_f"
              :label="item.label_f"
              :value="item.value_f"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-show="showSrjd" label="水溶解度：" style="width: 600px;font-size: 8ex" prop="srjd">
          <el-tooltip class="item" effect="dark" :content="this.element.lhsxbSrjd" placement="right">
            <el-input v-model="form.srjd" style="width: 50%;" placeholder="请输入内容" @change="getInformation">
              <template slot="append">mg/L</template>
            </el-input>
          </el-tooltip>
        </el-form-item>

        <el-form-item v-show="showBhzqy" label="饱和蒸气压：" style="width: 600px;font-size: 8ex" prop="bhzqy">
          <el-tooltip class="item" effect="dark" :content="this.element.lhsxbBhzqy" placement="right">
            <el-input v-model="form.bhzqy" style="width: 50%;" placeholder="请输入内容" @change="getInformation">
              <template slot="append">mmHG/pa</template>
            </el-input>
          </el-tooltip>
        </el-form-item>

      </el-form>

      <br>
      <br>
      <el-button style="margin-top: 12px;" @click="sendBaseInformation">下一步</el-button>
    </div>

  </div>

</template>

<script>
export default {
  name: 'BaseInformation',
  data() {
    return {
      form: {
        cas: '',
        srjd: '',
        bhzqy: ''
      },
      showSrjd: true,
      showBhzqy: true,
      selectedOptions: [],
      selectedOptions2: [],
      tip_1: '',
      tip_2: '',
      value_fc: '',
      label_fc: '',
      disabled: false,
      disabled_cates: true,
      disabled_techs: true,
      disabled_subCates: true,
      disabled_subTechs: true,
      faWzlb: '',
      wzlb: '',
      faClgy: '',
      process: '',
      value_ft: '',
      label_ft: '',
      value_c: '',
      value_t: '',
      value_f: '',
      label_c: '',
      label_t: '',
      label_f: '',
      element: {},
      cates: [{
        value: '基础化学品',
        label: '基础化学品',
        children: [{
          value: '基础化学品',
          label: '基础化学品'
        }]
      }, {
        value: '染料',
        label: '染料',
        children: [
          {
            value: '基础化学品',
            label: '基础化学品'
          }, {
            value: '分散染料',
            label: '分散染料'
          }, {
            value: '直接染料',
            label: '直接染料'
          }, {
            value: '活性染料',
            label: '活性染料'
          }, {
            value: '还原染料',
            label: '还原染料'
          }, {
            value: '硫化染料',
            label: '硫化染料'
          }, {
            value: '酸性染料，1个SO3基团',
            label: '酸性染料，1个SO3基团'
          }, {
            value: '酸性染料，>1个SO3基团',
            label: '酸性染料，>1个SO3基团'
          }, {
            value: '碱性染料',
            label: '碱性染料'
          }, {
            value: '偶氮染料（萘酚）',
            label: '偶氮染料（萘酚）'
          }, {
            value: '金属络合物染料',
            label: '金属络合物染料'
          }, {
            value: '颜料',
            label: '颜料'
          }, {
            value: '未知/难溶染料',
            label: '未知/难溶染料'
          }, {
            value: '未知/酸性基团染料',
            label: '未知/酸性基团染料'
          }]
      }, {
        value: '助剂',
        label: '助剂',
        children: [{
          value: '助剂',
          label: '助剂'
        }, {
          value: '基础化学品',
          label: '基础化学品'
        }, {
          value: '染色助剂（游离于纺织品的助剂）',
          label: '染色助剂（游离于纺织品的助剂）'
        }, {
          value: '固色剂（固着于纺织品的助剂）',
          label: '固色剂（固着于纺织品的助剂）'
        }, {
          value: '整理助剂',
          label: '整理助剂'
        }, {
          value: '颜料印花助剂',
          label: '颜料印花助剂'
        }, {
          value: '印花助剂',
          label: '印花助剂'
        }]
      }],
      subCates: [],
      techs: [
      ],
      subTechs: [],
      fibers: [{
        value_f: '1',
        label_f: '蛋白质'
      }, {
        value_f: '2',
        label_f: '棉'
      }, {
        value_f: '3',
        label_f: '毛'
      }, {
        value_f: '4',
        label_f: '纤维素'
      }, {
        value_f: '5',
        label_f: '聚酯'
      }, {
        value_f: '6',
        label_f: '聚酰胺'
      }, {
        value_f: '7',
        label_f: '聚丙烯腈'
      }, {
        value_f: '8',
        label_f: '无'
      }]
    }
  },
  watch: { // 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
    'form.cas': function(newVal, oldVal) {
      this.selectedOptions = []
      this.selectedOptions2 = []
      this.form.bhzqy = ''
      this.form.srjd = ''
      this.form.yjbz = '1'
      this.value_f = ''
    }
  },
  methods: {
    handleChangeWzlb() {
      this.faWzlb = this.selectedOptions[0]
      this.wzlb = this.selectedOptions[1]
      console.log('aaa:', this.selectedOptions[0] + '：' + this.selectedOptions[1])
      if (this.selectedOptions[0] != '') {
        if (this.selectedOptions[0] === '基础化学品') {
          this.showSrjd = true
          this.showBhzqy = true
          this.techs = [{
            value: '预处理',
            label: '预处理',
            children: [
              {
                value: '预处理、染色、印染、整理任意',
                label: '预处理、染色、印染、整理任意'
              }, {
                value: '预处理',
                label: '预处理'
              }]
          }]
        } else if (this.selectedOptions[0] === '染料') {
          this.showSrjd = false
          this.showBhzqy = false
          this.techs = [{
            value: '预处理',
            label: '预处理',
            children: [
              {
                value: '预处理、染色、印染、整理任意',
                label: '预处理、染色、印染、整理任意'
              }, {
                value: '预处理',
                label: '预处理'
              }]
          }, {
            value: '浸染染色',
            label: '浸染染色',
            children: [{
              value: '浸染工艺',
              label: '浸染工艺'
            }, {
              value: '涂料印花',
              label: '涂料印花'
            }, {
              value: '无',
              label: '无'
            }]
          }, {
            value: '浸轧染色',
            label: '浸轧染色',
            children: [{
              value: '整理的上游工序',
              label: '整理的上游工序'
            }, {
              value: '浸轧工艺，功能性整理任意',
              label: '浸轧工艺，功能性整理任意'
            }, {
              value: '印花',
              label: '印花'
            }, {
              value: '涂层',
              label: '涂层'
            }, {
              value: '连续染色',
              label: '连续染色'
            }, {
              value: '间歇式染色',
              label: '间歇式染色'
            }]
          }]
        } else {
          this.showSrjd = true
          this.showBhzqy = true
          this.techs = [{
            value: '浸染染色',
            label: '浸染染色',
            children: [{
              value: '浸染工艺',
              label: '浸染工艺'
            }, {
              value: '涂料印花',
              label: '涂料印花'
            }, {
              value: '无',
              label: '无'
            }]
          }, {
            value: '浸轧染色',
            label: '浸轧染色',
            children: [{
              value: '整理的上游工序',
              label: '整理的上游工序'
            }, {
              value: '浸轧工艺，功能性整理任意',
              label: '浸轧工艺，功能性整理任意'
            }, {
              value: '印花',
              label: '印花'
            }, {
              value: '涂层',
              label: '涂层'
            }, {
              value: '连续染色',
              label: '连续染色'
            }, {
              value: '间歇式染色',
              label: '间歇式染色'
            }]
          }]
        }
      }
    },
    handleChangeClgy() {
      this.faClgy = this.selectedOptions2[0]
      this.process = this.selectedOptions2[1]
      console.log('aaa:', this.selectedOptions2[0] + '：' + this.selectedOptions2[1])
    },

    getFiber() {
      this.value_f = this.fibers[this.value_f - 1].value_f
      this.label_f = this.fibers[this.value_f - 1].label_f
    },
    getInformation() {
      const casNo = { casNo: this.form.cas }
      this.$api.evaluate.getEvaluate(casNo).then((res) => {
        if (res.msg === 'fail') {
          this.$message('CAS号已存在，无法插入新物质')
        }
        this.$api.element.getInforamtion(casNo).then((res) => {
          this.element = res.data
        })
      })
    },
    putInput_2() {
      this.tip_1 = this.element.lhsxbSrjd
      // let srjd = {"casNo":this.form.cas, "wzlb":this.value_c}
    },
    putInput_3() {
      this.tip_2 = this.element.lhsxbBhzqy
    },
    getInput_1() {

    },
    sendBaseInformation() {
      if (this.form.cas != '') {
        if (this.selectedOptions != '') {
          if (this.selectedOptions2 != '') {
            if (this.value_f != '') {
              if ((this.faWzlb === '染料' && this.form.srjd === '') || (this.faWzlb != '染料' && this.form.srjd != '') || (this.faWzlb === '染料' && this.form.srjd != '')) {
                if ((this.faWzlb === '染料' && this.form.bhzqy === '') || (this.faWzlb != '染料' && this.form.bhzqy != '') || (this.faWzlb === '染料' && this.form.bhzqy != '')) {
                  const baseInformation = { casNo: this.form.cas, faWzlb: this.faWzlb, wzlb: this.wzlb, faClgy: this.faClgy, process: this.process, fiberId: this.value_f, fiber: this.label_f, lhsxbSrjd: this.form.srjd, lhsxbBhzqy: this.form.bhzqy }
                  // let flag = {flag:'1'};
                  this.$store.commit('setBaseInformation', baseInformation)
                  this.$emit('listenChild')
                } else {
                  this.$message('饱和蒸气压不能为空')
                }
              } else {
                this.$message('水溶解度不能为空')
              }
            } else {
              this.$message('纤维类型不能为空')
            }
          } else {
            this.$message('处理工艺不能为空')
          }
        } else {
          this.$message('物质类别不能为空')
        }
      } else {
        this.$message('cas号不能为空')
      }
      // 用下面的语句也可以，下面是调用evaluate中的$store.commit的方法，其实是脱裤子放屁，当时脑子抽了，写了个子组件向父组件传值。
      // this.$emit('listenChild',baseInformation);
    }
  }
}
</script>

<style scoped lang="scss">
.title{
  position:absolute;
  left:0px;
}
  .content{
    position:absolute;
    top:100px;
    left:20%;
    right:25%;
  }
  .bottom{
    position:absolute;
    top: 557px;
    left:72.1%;
  }
</style>
